<template>
  <div class="online">
    <div class="dot" :style="dotStyle"></div>
    <span class="text" :style="textStyle">{{text}}</span>
  </div>
</template>

<script>
export default {
  name: 'OnlineStatus',
  props: {
    status: {
      type: Number,
      required: true
    },
    size: {
      type: [Number, String],
      default: 14
    }
  },
  computed: {
    text() {
      return this.status ? '在线' : '离线'
    },
    bg() {
      return this.status ? '#07c160' : '#969799'
    },
    dotSize() {
      return Math.ceil(this.size / 3)
    },
    dotStyle() {
      return {
        backgroundColor: this.bg,
        width: this.dotSize + 'px',
        height: this.dotSize + 'px'
      }
    },
    textStyle() {
      return { fontSize: this.size + 'px' }
    }
  }
}
</script>

<style lang="scss" scoped>
.online{
  display: flex;
  align-items: center;
  .dot{
    border-radius: 50%;
    margin-right: 5px;
  }
  .text{
    color: $gray-6;
  }
}
</style>
